<template>
  <div class="global-container">
    <div class="search">
      <el-form ref="searchForm" :model="searchData" inline>
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="searchData.realname"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="searchData.phone"></el-input>
        </el-form-item>
        <el-form-item label="处室（单位）" prop="orgCode">
          <el-input v-model="searchData.orgCode"></el-input>
        </el-form-item>
        <el-form-item label="用户类型" prop="certType">
          <Aselect
            v-model="searchData.userType"
            :options="[
              { label: '二级造价工程师受理', value: '3' },
              { label: '乙级资质等级受理', value: '4' },
              { label: '三类人员受理', value: '8' },
              { label: '二级造价工程师审查', value: '5' },
              { label: '乙级资质等级审查', value: '6' },
              { label: '三类人员审查', value: '9' },
              { label: '管理', value: '7' },
            ]"
            :clearable="true"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="getTable"
            >查询</el-button
          >
          <el-button  size="mini" @click="reset">重置</el-button>
          <el-button size="mini" @click="newUser">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <Atable :tableData="tableData" :tableModel="tableModel">
      <template #actions="{ row }">
        <el-button @click="editUser(row)" type="text" size="small"
          >编辑账号</el-button
        >
        <el-button @click="power(row)" type="text" size="small">授权</el-button>
        <el-button
          v-if="!row.userType"
          @click="deletePower(row)"
          type="text"
          size="small"
          style="color: red"
          >删除</el-button
        >
      </template>
    </Atable>
    <PageSize
      ref="pageSize"
      :total="searchData.total"
      :pageNum="searchData.pageNo"
      :pageSize="searchData.pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></PageSize>
    <el-dialog
      :visible.sync="editDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      top="60px"
      width="600px"
    >
      <el-form ref="editForm" :model="editFormData" label-width="80px">
        <el-form-item label="用户类型" prop="userType">
          <Acheckbox
              v-model="editFormData.userTypeArr"
              :options="[
              { label: '二级造价工程师受理', value: '3' },
              { label: '乙级资质等级受理', value: '4' },
              { label: '三类人员受理', value: '8' },
              { label: '二级造价工程师审查', value: '5' },
              { label: '乙级资质等级审查', value: '6' },
              { label: '三类人员审查', value: '9' },
              { label: '管理', value: '7' },
            ]"
          ></Acheckbox>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitPower">修改授权</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="newDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      top="60px"
      width="600px"
      >
      <el-form ref="newForm" :model="newFormData" label-width="80px">
        <el-form-item label="姓名" prop="realname" :rules="$validate.maxLength(true, 0, 50)">
          <el-input v-model="newFormData.realname"></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="username" :rules="$validate.maxLength(true, 0, 50)">
          <el-input v-model="newFormData.username"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone" :rules="$validate.phone(true)">
          <el-input v-model="newFormData.phone"></el-input>
        </el-form-item>
        <el-form-item label="处室（单位）" prop="orgCode" :rules="$validate.maxLength(true, 0, 30)">
          <el-input v-model="newFormData.orgCode"></el-input>
        </el-form-item>
        <el-form-item label="职务" prop="post" :rules="$validate.maxLength(true, 0, 30)">
          <el-input v-model="newFormData.post"></el-input>
        </el-form-item>
        <el-form-item v-if="newMode === 'add'" label="用户类型" prop="userType">
          <Acheckbox
            v-model="newFormData.userType"
            :options="[
              { label: '二级造价工程师受理', value: '3' },
              { label: '乙级资质等级受理', value: '4' },
              { label: '三类人员受理', value: '8' },
              { label: '二级造价工程师审查', value: '5' },
              { label: '乙级资质等级审查', value: '6' },
              { label: '三类人员审查', value: '9' },
              { label: '管理', value: '7' },
            ]"
          ></Acheckbox>
        </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="newMode === 'add' ? submitNew() : submitEdit()">确认</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import Atable from '@/components/Table/Atable';
import Aselect from '@/components/Select/Aselect';
// import Aradio from '@/components/Radio/Aradio';
import Acheckbox from '@/components/Checkbox/Acheckbox';
import PageSize from '@/components/PageSize/PageSize';
import businessApi from '@/api/business';
export default {
  components: {
    Atable,
    Aselect,
    // Aradio,
    Acheckbox,
    PageSize,
  },
  data() {
    return {
      editDialog: false,
      newDialog: false,
      previewUrl: '',
      newFormData: {
        userTypeArr: []
      },
      newMode: 'add',
      searchData: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      tableData: [],
      rowInfo: {},
      editFormData: {
        userTypeArr: []
      },
    };
  },
  computed: {
    userTypeLabel() {
      return {
        3: '二级造价工程师受理',
        4: '乙级资质等级受理',
        5: '二级造价工程师审查',
        6: '乙级资质等级审查',
        8: '三类人员受理',
        9: '三类人员审查',
        7: '管理',
      };
    },
    // table fields
    tableModel() {
      return [
        {
          type: 'index',
          label: '序号',
        },
        {
          prop: 'realname',
          label: '姓名',
        },
        {
          prop: 'phone',
          label: '手机号',
        },
        {
          prop: 'orgCode',
          label: '处室（单位）',
        },
        {
          prop: 'post',
          label: '职务',
        },
        {
          prop: 'userType',
          label: '权限',
          render: (row) => {
            if (row.userType) {
              return row.userType
                .split(',')
                .map((item) => this.userTypeLabel[+item])
                .toString();
            } else {
              return '';
            }
          },
        },
        {
          prop: 'actions',
          label: '操作',
          width: '300',
          slot: 'actions',
        },
      ];
    },
  },
  mounted() {
    this.getTable();
  },
  methods: {
    async getTable() {
      let params = {
        ...this.searchData,
      };
      // 获取用户
      const res = await businessApi.getUserManagementList(params);
      this.tableData = res.records;
      this.searchData.total = res.total;
    },
    reset() {
      this.searchData = {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      };
      this.getTable();
    },
    // 添加用户
    newUser() {
      this.newMode = 'add';
      this.newFormData = {
        userTypeArr: []
      };
      this.newDialog = true;
    },
    // 修改用户
    editUser(row) {
      this.newMode = 'edit';
      this.newFormData = {
        ...row
      }
      if (row.userType) {
        const userTypeArr = row.userType.split(',');
        this.editFormData.userTypeArr = userTypeArr;
        if (userTypeArr.includes('4') || userTypeArr.includes('6')) {
          this.editFormData.customerType = 2;
        }
      }
      this.newDialog = true;
    },
    // 授权界面
    power(row) {
      this.rowInfo = row;
      this.editFormData = {
        customerType: 1,
      };
      this.editFormData = {
        ...row
      }
      if (row.userType) {
        const userTypeArr = row.userType.split(',');
        this.editFormData.userTypeArr = userTypeArr;
        if (userTypeArr.includes('4') || userTypeArr.includes('6')) {
          this.editFormData.customerType = 2;
        }
      }
      this.editDialog = true;
    },
    // 修改权限
    async submitPower() {
      let arr = this.editFormData.userTypeArr.sort((a,b)=> +a - +b)
      let params = {
        id: this.rowInfo.id,
        userType: arr.toString()
      }
      await businessApi.editUserManagement(params);
      this.$message.success('修改权限成功')
      this.editDialog = false;
      this.getTable()
    },
    // 删除用户
    deletePower(row) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        let params = {
          id: row.id,
        };
        await businessApi.deleteUserManagement(params);
        this.getTable();
        this.$message({
          type: 'success',
          message: '删除成功!',
        });
      });
    },
    // 新增用户
    submitNew() {
      this.$refs.newForm.validate((valid) => {
        if (valid) {
          businessApi.newThirdUser(this.newFormData).then(() => {
            console.log('new')
            this.$message.success('新增成功');
            this.newDialog = false;
            this.getTable();
          });
        }
      });
    },
    submitEdit() {
      this.$refs.newForm.validate((valid) => {
        if (valid) {
          businessApi.editThirdUser(this.newFormData).then(() => {
            console.log('edit')
            this.$message.success('修改成功');
            this.newDialog = false;
            this.getTable();
          });
        }
      });
    },
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.getTable();
    },
    handleCurrentChange(val) {
      this.searchData.pageNo = val;
      this.getTable();
    },
  },
};
</script>
<style lang="scss" scoped></style>
